﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时数据服务</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090";
    var wsHost = "ws:\//" + (window.isLocal ? document.location.hostname + ":8800" : "117.122.248.69:8800");
    var token = "jDTu8vHZoo9ABgE_IW48UcyYbwBhlOmfIub7gscWjzmiszd0vKC7xtcp8pIcK0eAAzANtETZdaFiE9d1l9Ojtg..";
    var map,
            urlMap = host + "/iserver/services/map-china400/rest/maps/China",
            urlQuery = host + "/iserver/services/map-china400/rest/maps/China_4326",
            urlDataFlow = wsHost + "/iserver/services/dataflow/dataflow";
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG3857,
        center: [39.88, 116.42],
        maxZoom: 18,
        zoom: 12
    });
    L.supermap.tiledMapLayer(urlMap).addTo(map);
    if (!window.isLocal) {
        SuperMap.SecurityManager.registerToken(urlDataFlow, token);
    }

    //创建DataFlowLayer，创建DataFlowLayer订阅DataFlow并将结果加载到地图上
    var dataFlowLayer = L.supermap.dataFlowLayer(urlDataFlow, {
        style: function (feature) {
            return {
                fillColor: "red",
                fillOpacity: 1,
                radius: 6,
                weight: 0
            };
        },
        onEachFeature: function (feature, layer) {
            L.popup({offset: L.point(0, 0)})
                    .setLatLng(L.GeoJSON.coordsToLatLng(feature.geometry.coordinates))
                    .setContent(feature.properties.time)
                    .openOn(map);
        },
        //geometry:{coordinates:[[[116.381741960923,39.8765100055449],[116.414681699817,39.8765100055449],[116.414681699817,39.8415115329708],[116.381741960923, 39.8415115329708],[116.381741960923,39.8765100055449]]],type:"Polygon"},
        // excludeField:["id"]
    });
    dataFlowLayer.addTo(map);

    //查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务，模拟实时数据
    //可通过dataFlowService将其他实时数据广播给iServer
    query();
    var timer, featureResult, dataFlowService;

    function query() {
        var param = new SuperMap.QueryBySQLParameters({
            queryParams: {
                name: "Main_Road_L@China#1",
                attributeFilter: "SMID = 1755"
            }
        });
        L.supermap
                .queryService(urlQuery)
                .queryBySQL(param, function (serviceResult) {
                    featureResult = serviceResult;
                    dataFlowService = L.supermap.dataFlowService(urlDataFlow).initBroadcast();
                    dataFlowService.on('broadcastSocketConnected', function (e) {
                        timer = window.setInterval("broadcast()", 2000);
                    })
                });
    }

    var count = 200;

    function broadcast() {
        if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
            window.clearInterval(timer);
            return;
        }
        var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
        var feature = {
            geometry: {coordinates: [point[0], point[1]], type: "Point"},
            id: 1,
            type: "Feature",
            properties: {id: 1, time: new Date()}
        };
        dataFlowService.broadcast(feature);
        count += 3;
    }
</script>
</body>
</html>